let status = {
    This: null,
    Id: 0,
    flag: 1,
    getThis: function () {
        if (this.Id >= 0)
            this.This = $(".carousel>.images>ul>li:first-child");
    },
    getId: function () {
        if (this.Id >= 0)
            this.Id = Number(this.This.attr("id"));
    }
};

(function () {
    setInterval("auto()", 2500)
})();

function select(Index) {
    console.log(Index);
    $(`.goto > span:nth-child(${Index + 1})`).css('border-color', "rgb(52,211,251)").siblings().css('border-color', '#505052');
}


function turn_right(speed_time = 2500, stop = false) {
    status.getThis();
    status.getId();
    let Id = status.Id;
    let This = status.This;
    select((Id + 1) % 4);
    if (stop) {
        This.stop(false, true);
    }
    This.animate({"margin-left": "-100%"}, speed_time, 'swing', function () {
        $(this).parent("ul").find("li:last-child").after(`<li id="${Id}"><img src="${$(this).children("img").attr("src")}"></li>`);
        $(this).remove();
    });
}

function turn_left(speed_time = 100) {
    status.getThis();
    status.getId();
    let Id = status.Id;
    let This = status.This;
    Id--;
    if (Id < 0) {
        Id = 3;
    }
    select(Id);
    $(This).stop(false, false).animate({"margin-left": "0"}, speed_time, 'swing', function () {
        let last_child = $(This).parent("ul").children("li:last-child");
        $(This).before(`<li id="${Id}" style="margin-left:-100%"><img src="${last_child.children("img").attr("src")}"></li>`);
        $(This).parent("ul").children("li:last-child").animate({"margin-left": "0"}, speed_time, 'swing', function () {
            last_child.remove();
            $(".carousel>.left").removeAttr("disabled");
        })
    });
}

function auto(speed_time) {
    if (status.flag) {
        turn_right(speed_time);
    } else {
        console.log("状态不允许");
    }
}

$(".carousel>.right").on("click", () => {
    turn_right(100, true);
})
$(".carousel>.left").on("click", () => {
    $(this).attr("disabled", "disabled");
    status.flag = 0;
    turn_left();
    status.flag = 1;
})
$(".carousel ul>li").on("click", () => {
    $(this).parent().children("li").attr("disabled", "disabled");
    let diff=Number(this.attr("id")) - Number(status.Id)
    if (diff=== 0) {
        $(status.This).stop(false, true);
    }else if(diff>0){
        let D=diff;
        while (D>0){
            turn_right(100,true)
            D--;
        }
    }else if(diff<0){
        let D=-diff;
        while (D>0){
            turn_left();
            D--;
        }
    }
})